<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 ECharts 文件 -->
    <script src="js/echarts.min.js"></script>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <link href="layui-v2.6.4/layui/css/modules/code.css" rel="stylesheet" type="text/css"/>
    <link href="/layui-v2.6.4/layui/css/layui.css" media="all" rel="stylesheet">
    <script charset="UTF-8" src="/js/jquery-3.5.1.min.js"></script>
</head>
<script charset="utf-8" src="/layui-v2.6.4/layui/layui.js"></script>
<body>
<!--跳转表格-->
<script>
    function toEchart() {
        location.assign("toEntrustPage")
    }
</script>
<a class="layui-btn  layui-btn-sm" onclick="toEchart()">表格显示</a>

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main"
     style="width: 900px;height:650px;margin-top:0px;margin-left: 210px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    $.ajax({
        url: "/entrustEchart"
        , type: 'get'
        , dataType: "json"
        , success: function (EntrustTypeMap) {

            // 基于准备好的dom，初始化echarts实例

            var myChart = echarts.init(document.getElementById('main'));//main是<div id="main" style="width: 600px;height:400px;"></div>的id

            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    // data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
                    data: EntrustTypeMap.EntPlanName
                },
                series: [
                    {
                        name: '委托类型',
                        type: 'pie',
                        selectedMode: 'single',
                        radius: [0, '30%'],
                        label: {
                            position: 'inner',
                            fontSize: 14,
                        },
                        labelLine: {
                            show: false
                        },
                        data: EntrustTypeMap.EntPlan,
                    },
                    {
                        name: '委托进度',
                        type: 'pie',
                        radius: ['45%', '60%'],
                        labelLine: {
                            length: 30,
                        },
                        label: {
                            formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                            backgroundColor: '#F6F8FC',
                            borderColor: '#8C8D8E',
                            borderWidth: 1,
                            borderRadius: 4,

                            rich: {
                                a: {
                                    color: '#6E7079',
                                    lineHeight: 22,
                                    align: 'center'
                                },
                                hr: {
                                    borderColor: '#8C8D8E',
                                    width: '100%',
                                    borderWidth: 1,
                                    height: 0
                                },
                                b: {
                                    color: '#4C5058',
                                    fontSize: 14,
                                    fontWeight: 'bold',
                                    lineHeight: 33
                                },
                                per: {
                                    color: '#fff',
                                    backgroundColor: '#4C5058',
                                    padding: [3, 4],
                                    borderRadius: 4
                                }
                            }
                        },
                        data: EntrustTypeMap.EntrusType,
                    }
                ]
            };
            myChart.setOption(option);
        }
    });
</script>
</body>
</html>